<template>
    <tr>
      <th><input type="checkbox" v-model="shopping.checked"/> <span></span></th>
      <th>{{shopping.name}}</th>
      <th>{{shopping.price}}</th>
      <th><button @click="reduceFn">-</button>{{shopping.num}} <button @click="addFn">+</button></th>
      <th>{{total}}</th>
      <th><button @click="delFn">删除</button></th>
    </tr>
</template>

<script>
export default {
  props: {
    shopping: '',
  },
  methods: {
    reduceFn() {
        if(this.shopping.num === 1) {
            alert('不能再减了')
        }else {
            this.shopping.num--
        }
        
    },
    addFn() {
        this.shopping.num++
    },
    delFn() {
      // 传值
      this.$emit("del",this.shopping.name)
    }
  },
  computed: {
    total() {
     return   this.shopping.price * this.shopping.num
    }
  }
}
</script>

<style></style>
